<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./default.css" />
    <link rel="stylesheet" href="./chart.css" />
  </head>
  <body>
    <div class="con">
      <nav class="nav">
        <div class="item item-1">
          <div class="img-box i">
            <img src="./images/top-1.png" width="28" height="28" alt="" />
          </div>
          <div class="pad">
            <div class="i right">
              <div class="count">
                <span class="number">20</span><span>件</span>
              </div>

              <p class="text">玉禾田待办</p>
            </div>
          </div>
        </div>
        <div class="item item-2">
          <div class="img-box i">
            <img src="./images/top-2.png" width="28" height="28" alt="" />
          </div>
          <div class="pad">
            <div class="i right">
              <div class="count">
                <span class="number">20</span><span>件</span>
              </div>

              <p class="text">城乡环卫待办</p>
            </div>
          </div>
        </div>
        <div class="item item-3">
          <div class="img-box i">
            <img src="./images/top-3.png" width="28" height="28" alt="" />
          </div>
          <div class="pad">
            <div class="i right">
              <div class="count">
                <span class="number">20</span><span>件</span>
              </div>

              <p class="text">管理工作考核待办</p>
            </div>
          </div>
        </div>
      </nav>

      <!-- 第一个图标部分 -->
      <article class="nav article article-1">
        <p class="title">玉禾田考核</p>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-1"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-2"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-3"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-4"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
      </article>
      <div class="chart">
        <div class="title-box">
          <p class="title">近半年数据变化趋势</p>
        </div>
        <div class="chart-img-box">
          <div id="lineChart" style="width: 100%;height: 360px;"></div>
        </div>
      </div>
      <!-- end -->

      <!-- 第二个图标部分 -->
      <article class="nav article article-2">
        <p class="title">城乡环卫考核</p>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-1"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-2"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-3"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-4"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
      </article>
      <div class="chart-box clearfix ">
        <div class="chart half f-l blue">
          <div class="title-box">
            <p class="title">近半年数据变化趋势</p>
          </div>
          <div class="chart-img-box">
            <img src="./images/chart-blue.png" width="100%" alt="" />
          </div>
        </div>
        <div class="chart half f-r green">
          <div class="title-box">
            <p class="title">近半年数据变化趋势</p>
          </div>
          <div class="chart-img-box">
            <img src="./images/chart-green.png" width="100%" alt="" />
          </div>
        </div>
      </div>
      <!-- end -->

      <!-- 第三个图标部分 -->
      <article class="nav article article-3">
        <p class="title">城乡环卫考核</p>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-1"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-2"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-3"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box">
          <div class="item">
            <div class="img-box i">
              <div class="bg-img bg-img-4"></div>
            </div>
            <div class="pad">
              <div class="i right">
                <div class="count">
                  <span class="number">20</span><span>件</span>
                </div>

                <p class="text">玉禾田待办</p>
              </div>
            </div>
          </div>
        </div>
      </article>
      <div class="chart-box clearfix ">
        <div class="chart half f-l blue">
          <div class="title-box">
            <p class="title">近半年数据变化趋势</p>
          </div>
          <div class="chart-img-box">
            <img src="./images/chart-orange.png" width="100%" alt="" />
          </div>
        </div>
        <div class="chart half f-r green">
          <div class="title-box">
            <p class="title">近半年数据变化趋势</p>
          </div>
          <div class="chart-img-box">
            <img src="./images/chart-green.png" width="100%" alt="" />
          </div>
        </div>
      </div>
      <!-- end -->
    </div>
    <!-- js -->
    <script src="./lib/echarts/index.js"></script>
    <script>
      var lineChart = echarts.init(document.getElementById("lineChart"));
      var lineData = [820, 1532, 901, 934, 1290, 1330];
      var lineDataCount = lineData.reduce(function(per, cur, index, lineData) {
        return per + cur;
      });
      lineOption = {
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            id: 1,
            type: "value",
            splitLine: {
              lineStyle: {
                color: ["#D0F4F1"]
              }
            },
            axisLine: {
              show: false,
              onZero: false
            },
            axisTick: {
              show: false
            }
          },
          {
            id: 2,
            type: "value",
            splitLine: {
              lineStyle: {
                color: ["#D0F4F1"]
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(params) {
                return parseInt((params * 100) / lineDataCount) + "%";
              }
            }
          }
        ],
        grid: {
          top: 30,
          right: 40,
          left: 40,
          bottom: 50
        },
        series: [
          {
            data: lineData,
            yAxisIndex: 1,
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            symbolOffset: [0, 0],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FAF7F3" }, //渐变色

                { offset: 1, color: "#FAFFFF" } //渐变色
              ])
            },

            itemStyle: {
              color: "#FFB164"
            },
            label: {
              show: true,
              color: "#636363",
              opacity: "0.79",
              formatter: function(params) {
                return ((params.value * 100) / lineDataCount).toFixed(2) + "%";
              }
            }
            // symbolOffset: [0, -10]
          },
          {
            data: lineData,
            type: "bar",
            barWidth: 18,
            itemStyle: {
              barBorderRadius: 8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#8bdcdb" }, //柱图渐变色
                { offset: 1, color: "#0da19b" } //柱图渐变色
              ])
            }
          }
        ]
      };
      lineChart.setOption(lineOption);
    </script>
  </body>
</html>
